<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/loading.min.css" />
<link href="fonts/iconfont.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap">
        <!-- 菜单容器 -->
        <aside class="mui-off-canvas-left" id="offCanvasSide">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- 菜单具体展示内容 -->
                    <div class="navLeft">
                        <ul>
                            <li v-for="vo in columns"><span class="icon_dot mui-pull-left"></span>{{vo.title}} <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></li>  
                        </ul>

                        <ul>
                            <li><span class="icon_dot mui-pull-left"></span>个人中心 <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></li>
                            <li><span class="icon_dot mui-pull-left"></span>推荐我们 <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></li>
                            <li><span class="icon_dot mui-pull-left"></span>关于我们 <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></li>
                            <li><span class="icon_dot mui-pull-left"></span>法律声明 <i class="mui-pull-right mui-icon mui-icon-arrowright"></i></li>
                        </ul>
                    </div>
                    <div class="navRight">
                        <li><div class="img"><img src="http://placehold.it/30x30" alt="" /></div> 分类名称  <div class="mui-pull-right guanzhu">关注</div></li>
                        <li><div class="img"><img src="http://placehold.it/30x30" alt="" /></div> 分类名称  <div class="mui-pull-right guanzhu active">已关注</div></li>
                        <li><div class="img"><img src="http://placehold.it/30x30" alt="" /></div> 分类名称  <div class="mui-pull-right guanzhu">关注</div></li>
                        <li><div class="img"><img src="http://placehold.it/30x30" alt="" /></div> 分类名称  <div class="mui-pull-right guanzhu active">已关注</div></li>
                        <li><div class="img"><img src="http://placehold.it/30x30" alt="" /></div> 分类名称  <div class="mui-pull-right guanzhu">关注</div></li>
                        <li><div class="img"><img src="http://placehold.it/30x30" alt="" /></div> 分类名称  <div class="mui-pull-right guanzhu active">已关注</div></li>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主页面标题 -->
        <header class="mui-bar mui-bar-nav in-bar">    
            <a href="javascript:window.hostory.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <a href="#offCanvasSide" class="mui-icon mui-icon-bars mui-pull-left"></a>
            <h1 class="mui-title" v-text="title"></h1>
            <a href="javascript:void(0)" id="searchIcon" class="mui-icon mui-icon-search mui-pull-right"></a>
        </header> 

        <div class="channelBox fixChannel">
            <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted channel">
                <div class="mui-scroll">
                    <a href="" class="mui-control-item mui-active">全部</a>   
                    <a href="" class="mui-control-item" v-for="vo in guanzhu">{{vo.title}}</a>  
                </div>                  
            </div>
            <div class="dingyue">
                <a href="dingyue.htm">
                <i class="mui-icon mui-icon-plusempty"></i> 
                </a>
            </div>
        </div>
        
        
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item my-tab">
                <span class="icon icon-yumi"></span>
                <span class="mui-tab-label">能量类</span>
            </a>
            <a class="mui-tab-item my-tab">
                <span class="icon icon-danbaizhi"></span>
                <span class="mui-tab-label">蛋白类</span>
            </a>
            <a class="mui-tab-item my-tab">
                <span class="icon icon-huaxueshiji"></span>
                <span class="mui-tab-label">添加剂</span>
            </a>
            <a class="mui-tab-item my-tab">
                <span class="icon icon-cunqianguan"></span>
                <span class="mui-tab-label">养殖</span>
            </a>
            <a class="mui-tab-item my-tab">
                <span class="icon icon-huiyuan"></span>
                <span class="mui-tab-label">个人</span>
            </a>
        </nav>

        <!-- 主页面内容容器 -->
        <div id="my-scroll" class="mui-content mui-scroll-wrapper" style="padding-top: 84px">
            <div class="mui-scroll">
                <!-- 主界面具体展示内容 -->
                    
                <div class="box bg-white">
                    <ul class="mui-table-view">
                        <div id="loadding" class="loadding">
                            <span class="mui-spinner"></span>
                        </div>

                        <li class="mui-table-view-cell mui-media my-media" v-for="vo in list">
                            <a :href="vo.url" style="margin: 0; white-space: normal;">
                            <img class="mui-media-object mui-pull-left" :src="vo.imgurl">
                            <div class="mui-media-body">
                                {{vo.title}}
                                <div style="padding: 5px 0">
                                <p class="mui-pull-left">
                                    <i class="icon icon-shijian"></i>
                                    <span v-text="vo.time"></span>
                                </p>
                                <p class="mui-pull-right">
                                    <i class="icon icon-yanjing"></i>
                                    <span v-text="vo.num"></span>
                                </p>
                                </div>
                            </div>  
                            </a>                        
                        </li>   
                    </ul>
                </div>
                
            </div>
        </div>
     <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>

<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/loading.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" charset="utf-8"> 
mui('.mui-scroll-wrapper').scroll();  
var scroll = mui('.mui-scroll-wrapper').scroll();
var scroll1 = mui('#my-scroll').scroll();
document.getElementById('my-scroll').addEventListener('scroll', function (e ) {
  console.log(scroll1.y);
}) 
</script>
</body>
</html>